<template>
<div class="change-password">
<h2>更改密码</h2>
<form @submit.prevent="changePassword">
  <div>
    <label for="oldPassword">旧密码:</label>
    <input type="password" id="oldPassword" v-model="oldPassword" required />
  </div>
  <div>
    <label for="newPassword">新密码:</label>
    <input type="password" id="newPassword" v-model="newPassword" required />
  </div>
  <div class="buttons-wrapper">
    <button type="submit">确定</button>
    <button type="button" @click.prevent="cleanModal">取消</button>
  </div>
</form>
</div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      oldPassword: "",
      newPassword: "",
    };
  },
  methods: {
    // Other methods...

    // 修改密码
    async changePassword() {
      try {
        const url = "http://localhost:8081/audit/change";

        // 获取令牌
        const token = localStorage.getItem("token");

        const requestData = {
          oldPwd: this.oldPassword,
          newPwd: this.newPassword,
        };

        const requestHeaders = {
          "Authorization": `${token}`,
        };

        const response = await axios.put(url, requestData, { headers: requestHeaders });

        if (response.data.code === 20000) {
          this.$message.success("密码修改成功！");
          this.oldPassword = "";
          this.newPassword = "";
        } else {
          this.$message.error(response.data.message);
        }
      } catch (error) {
        console.error("更改密码失败:", error);
        this.$message.error("更改密码失败，请稍后重试。");
      }
    },
    async cleanModal(){
      this.oldPassword = "";
      this.newPassword = "";
    },
  },
};
</script>

<style scoped>
.change-password {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 50px 0;
}

form {
  display: grid;
  gap: 10px;
}

input[type="password"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 5px;
}

.buttons-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

button {
  padding: 10px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  background: #007bff;
  color: #fff;
  transition: background 0.3s;
  white-space: nowrap;
}

button:hover {
  background: #0056b3;
}
</style>